<template>
  <div>
    <h2>Hello, {{ name }}</h2>
    <p>你的名字是{{ num }}个字</p>
    <button @click="fnfn">触发一个自定义事件</button>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  props: ['name'],
  emits: ['click'],

  setup(props, context) {
    console.log('context.attrs', context.attrs)
    console.log('context.emit', context.emit)
    console.log('context.expose', context.expose)
    console.log('context.slots', context.slots)

    // props 数据不能解构使用，会丢失响应式
    const { name } = props // name '张三'

    // num 依赖的内容是 '张三'
    const num = computed(() => {
      return name.length
    })

    function fnfn() {
      // 触发自定义事件
      context.emit('click')
    }

    // 通过 context.expose 控制对外的暴露
    context.expose({
      hello: '你看啥'
    })

    return {
      num,
      fnfn
    }
  }
}
</script>
